<template>
  <div class="fix-page">
      <div class="bd place">
          <headerNav  :isShowBack="true" title="编辑个人资料"></headerNav>
          <div class="pic">
              <img src="../../assets/touxiang.png" height="734" width="713" alt=""/>
          </div>
          <div class="data1">
              <div class="d1">
                  <p>昵称</p>
                  <input v-model="userInfo.username" value="小摹">
              </div>
              <div class="d2">
                  <p>性别</p>
                  <div style="display: flex;align-items: center">
                      <input v-model="userInfo.sex"  type="radio" name="sex"  value="man"><span style="margin-left: 5px;">男士</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                      <input v-model="userInfo.sex"  type="radio" name="sex" value="woman"><span style="margin-left: 5px;">女士</span>
                  </div>
              </div>
              <div class="d1">
                  <p>生日</p>
                  <input v-model="userInfo.birthday" value="生日">
              </div>
          </div>
          <div class="data2">
              <div class="d3">
                  <p>手机号</p>
                  <div>{{userInfo.phone}}</div>
                  <span>›</span>
              </div>
              <div class="d3">
                  <p>邮箱</p>
                  <div>未绑定</div>
                  <span>›</span>
              </div>
              <div class="d3">
                  <p>微信</p>
                  <div>未绑定</div>
                  <span>›</span>
              </div>
              <button class="btn" @click="logout">退出登录</button>
              <button class="btn" @click="editInfo">确定</button>
          </div>

      </div>
  </div>

</template>

<script>
    import headerNav from 'components/HeaderNav/headerNav'
    import {changeUserInfo} from 'network/index'
export default {
name: "editInfo",
    components:{
        headerNav
    },
    data(){
      return{
         userInfo:{
             user_id:1,
             username:"小慕",
             phone:"18378949031",
             sex:"man",
             email:"",
             Integral:"22",
             birthday:""
         }
      }
    },
    methods:{
       logout(){
           this.$store.dispatch("logOut")
           this.$router.push("/mine")
           this.$toast({
               message: '退出登录成功',
           });
       },
        editInfo(){
            changeUserInfo(this.userInfo).then(res=>{
                this.$router.push("/mine")
                this.$toast({
                    message: '保存成功',
                });
            }).catch(err=>{
                this.$toast({
                    message: '编辑失败，服务端错误',
                });
            })
        }
    }
}
</script>

<style scoped>
    .fix-page{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #fff;
        z-index: 777;
    }
    .fix-page .place{
        overflow: auto;
        height: 100%;
        background: #fff;
    }
  .bd{
    height: 600px;
      margin-bottom: 50px;
    background: rgba(242,242,242,0.59);
  }
  .title{
    width: 100%;
    height: 7%;
    position: relative;
    background: white;
  }
  .back{
    float: left;
    width: 10%;
    margin: 5px 10px;
    font-size: 30px;
    position: absolute;
  }
  .head{
    height: 60%;
    top:30%;
    left:50%;
    transform: translateX(-50%);
    line-height: 25px;
    font-size: 16px;
    position: absolute;
  }
  .pic{
    width: 100%;
    height: 25%;
    background: white;
    position: relative;
  }
  .pic>img{
    width: 80px;
    height: 80px;
    top:20%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 40px;
    position: absolute;
  }
  .data1{
    width: 100%;
    height: 24%;
    margin: 3% 0;
    background: white;
  }
  .data1>div{
      border-bottom: 1px solid #eee;
  }
  .data2>div{
      border-bottom: 1px solid #eee;
  }
  .d1{
    width: 100%;
    height: 33%;
    font-size: 13px;
    line-height: 50px;
    overflow: hidden;
  }
  .d1>p{
    width: 20%;
    height: 100%;
    float: left;
    text-align: center;
  }
  .d1>input{
    margin: 15px 40px 0 5px;
    width: 60%;
    height: 50%;
    border: none;
    float: right;
    opacity: 0.6;
  }
  .d1>div{
    width: 70%;
    height: 100%;
    float: right;
    opacity: 0.6;
  }
  .d2{
    width: 100%;
    height: 33%;
    font-size: 13px;
    line-height: 50px;
  }
  .d2>p{
    width: 20%;
    height: 100%;
    float: left;
    text-align: center;
  }
  .d2>div{
    width: 70%;
    height: 100%;
    float: right;
  }
  .d2>span{
    width: 20%;
    height: 100%;
    opacity: 0.6;
  }
  .data2{
    width: 100%;
    height: 38%;
    margin: 3% 0 80px 0;
    background: white;
  }
  .d3{
    width: 100%;
    height: 22%;
    font-size: 13px;
  }
  .d3>p{
     width: 20%;
     height: 100%;
     float: left;
     text-align: center;
    line-height: 50px;
   }
  .d3>div{
    width: 70%;
    height: 100%;
    float: left;
    opacity: 0.6;
    text-align: right;
    line-height: 50px;
  }
  .d3>span{
    float: left;
    text-align: right;
    margin: 0 10px;
    font-size: 30px;
    opacity: 0.6;
    line-height: 45px;
  }
  .btn{
    width: 90%;
    height: 20%;
    background: black;
    color: white;
    border: black solid;
    border-radius: 5px;
    margin: 10px 5% 5px 5%;
   }
</style>